<template>
  <div class="m-category">
    <dl class="alpha">
      <dt>按拼音字母选择：</dt>
      <dd
        v-for="letter in list"
        :key="letter"
      >
        <a :href="'#city-' + letter">{{ letter }}</a>
      </dd>
    </dl>

    <dl 
      v-for="(item, index) of block"
      :key="index"
      :id="'city-' + item.title"
      class="block"
    >
      <dt>{{ item.title }}</dt>
      <dd>
        <span 
          v-for="position of item.city"
          :key="position.city"
          :class="isHot(position.city)"
          @click="handleChange(position)"
        >{{ position.city }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import pyjs from 'js-pinyin'

export default {
  data() {
    return {
      list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      block: []
    }
  },
  computed: {
    isHot() {
      let hotCity = this.$store.state.geo.hotCity
      return function(city) {
        for (const item of hotCity) {
          if (item.name === city || item.province === city) return 'hot'
        }
      }
    }
  },
  async mounted() {
    let blocks = []
    let {status, data: {city}} = await this.$axios.get('/geo/city')

    if (status === 200) {
      let p
      let c
      let d = {}
      let reg = /\S+(省)/
      city.forEach(item => {
        // p 城市拼音首字母
        p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0, 1)
        c = p.charCodeAt(0)
        if (c > 96 && c < 123) {
          if (!d[p]) {
            d[p] = []
          } else {
            if (reg.test(item.name)) return
            d[p].push({
              city: item.name,
              province: item.province
            })
          }
        }
      })

      for (let [k, v] of Object.entries(d)) {
        blocks.push({
          title: k.toUpperCase(),
          city: v
        })
      }

      blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
      this.block = blocks
    }
  },
  methods: {
    handleChange(position) {
      this.$router.push('/')
      this.$store.dispatch('geo/setPosition', position)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .m-category
    .alpha
      padding 30px 0
      dt
        display inline-block
        font-size 16px
        color #333
        font-weight 500
        vertical-align middle
      dd
        display inline-block
        margin 0 6px
        width 25px
        height 25px
        line-height 25px
        border-radius 50%
        box-sizing border-box
        font-size 15px
        color #666
        text-align center
        vertical-align middle
        &:hover
          background-color #f8f8f8
        a:visited
          color #666
    .block
      padding 13px 30px 13px 10px
      border-radius 10px
      transition background-color .5s
      &:hover
        background-color #f8f8f8
      dt
        display inline-block
        width 40px
        height 40px
        line-height 40px
        border-radius 50%
        color #ffffff
        background-color #13d1be
        box-shadow 0 4px 5px 0 rgba(39, 178, 164, .22)
        vertical-align top
        text-align center
        cursor default
      dd
        display inline-block
        max-width 1060px
        span
          display inline-block
          margin 10px 20px
          color #666
          font-size 14px
          cursor pointer
          &:hover
            color #31bbac
          &.hot
            color #F60
</style>
